<template>
    <div>
      <header>
        <!-- 顶部 = logo + 用户名 + 注销 -->
      </header>
      <main>
        <aside>
          <el-row class="tac">
            <!-- default-active 活动的菜单 - 存储vuex - 路由拦截修改 -->
            <el-col :span="12">
              <el-menu
                v-for="auth in auths"
                :key="auth._id"
                :router="true"
                :unique-opened="true"
                default-active="0"
                :default-openeds="[auths[0]._id]"
                :collapse-transition="true"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <template v-if="auth.isShow">
                  <el-submenu :index="auth._id">
                    <template slot="title">
                      <i :class="[auth.icon]"></i>
                      <span>{{auth.name}}</span>
                    </template>
                    <template v-if="auth.children.length">
                      <el-menu-item v-for="son in auth.children.filter(item => item.isShow)" :key="son._id" :route="{path: son.path}" :index="son._id">
                        <!-- 子权限icon -->
                        <i :class="[son.icon]"></i>
                        <span>{{son.name}}</span>
                      </el-menu-item>
                    </template>
                  </el-submenu>  
                </template>
              </el-menu>
            </el-col>
          </el-row>
        </aside>
        <article>
          <!-- home主页作为子路由 - echarts -->
          <router-view></router-view>
        </article>
      </main>
      <footer></footer>
    </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    computed: {
      ...mapState(['auths'])
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
}
</script>
<style>
  div.el-col-12{
    width: 100%;
  }
  header{
    width: 100%;
    height: 100px;
    background-color: #00f;
  }
  main{
    width: 100%;
  }
  aside{
    background-color: #0f0;
    width: 20%;
  }
  article{
    background-color: #f00;
    width: 80%;
  }
  aside, article{
    float: left;
    height: 500px;
  }
  main:after{
    clear: both;
    content: '';
    display: block;
  }
  footer{
    height: 100px;
    width: 100%;
    background-color: #ccc;
  }
</style>